<template>
  <div>
    <img
      :class="wrapClasses"
      :style="{width: ''+width+'px', height: ''+height+'px'}"
      :src="src"  alt="加载失败" title=""
      v-if="!!src"
      @click="showPreview"/>
    <span v-if="!!text" @click="showPreview">{{text}}</span>

    <div class="sh-image-mask" v-if="showMask">
      <div class="sh-mask-wrap">

        <Icon class="sh-mask-wrap-choseBtn"  @click="closePreview" type="icon-close-circle" size="50" />
        <div class="sh-mask-wrap-drag" v-drag>
          <div class="sh-mask-wrap-imgbox" >
            <img
              ref='img'
              :class="['sh-mask-wrap-img', {'sh-mask-img-full': !isFull}]"
              :style="{transform:'scale('+multiples+') rotate('+deg+'deg)'}"
              :src="prevSrcUrl" alt="" title=""
              @click.stop.prevent="imgClick"
              />
            <!-- 没有图片提示 -->
            <!-- <p v-if="!isPreviewSrcListEmpty">没有图片</p> -->
          </div>
        </div>

        <div class="sh-mask-wrap-tools">
          <span @click.prevent="scaleDown"><Icon  type="icon-narrow" size="20"/></span>
          <span @click.prevent="scaleUp"><Icon type="icon-enlarge" size="20"/></span>
          <span @click.prevent="fullScreen"><Icon :type="getfullScreen" size="20"/></span>
          <span @click.prevent="rotateLt"><Icon type="icon-left-turn" size="20"/></span>
          <span @click.prevent="rotateRt"><Icon type="icon-right-turn" size="20"/></span>
        </div>

        <Icon class="sh-mask-wrap-prev"
          v-show="isPreviewSrcListEmpty"
          @click="prev" type="icon-pre" size="50"/>
        <Icon class="sh-mask-wrap-next"
          v-show="isPreviewSrcListEmpty"
          @click="next" type="icon-next" size="50"/>
      </div>
    </div>

  </div>
</template>
<script>
import Emitter from '../../../mixins/emitter'
import size from '../../../mixins/size'
import Locale from '../../../mixins/locale'
export default {
  name: 'Images',
  mixins: [Locale, Emitter, size],
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let oDiv = el // 获取当前元素
        oDiv.onmousedown = (e) => {
          // 算出鼠标相对元素的位置
          e.preventDefault()
          let disX = e.clientX - oDiv.offsetLeft
          let disY = e.clientY - oDiv.offsetTop

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX
            let top = e.clientY - disY
            oDiv.style.left = left + 'px'
            oDiv.style.top = top + 'px'
          }

          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    previewSrcList: {
      type: Array,
      default: []
    },
    width: {
      type: String,
      default: 120
    },
    height: {
      type: String,
      default: 'auto'
    },
    text: {
      type: String,
      defult: ''
    }
  },
  data () {
    return {
      showMask: false,
      multiples: 1,
      deg: 0,
      currentSrcNum: 0,
      isFull: false
    }
  },
  computed: {
    wrapClasses () {
      return ['sh-image', {
        [`sh-image-${this.sizes}`]: !!this.sizes
      }]
    },
    prevSrcUrl () {
      return this.previewSrcList[this.currentSrcNum]
    },
    isPreviewSrcListEmpty () {
      return !!(this.previewSrcList && this.previewSrcList.length > 1)
    },
    getfullScreen () {
      return this.isFull ? 'icon-full-screen-big' : 'icon-full-screen'
    }
  },
  mounted () {
    if (this.src) {
      this.currentSrcNum = this.previewSrcList.indexOf(this.src)
    }
  },
  methods: {
    closePreview () {
      this.showMask = false
      this.multiples = 1
      this.isFull = false
      this.deg = 0
      if (this.src) {
        this.currentSrcNum = this.previewSrcList.indexOf(this.src)
      } else {
        this.currentSrcNum = 0
      }
    },
    showPreview () {
      if (this.src) {
        this.currentSrcNum = this.previewSrcList.indexOf(this.src)
      }
      this.showMask = true
    },
    scaleDown () {
      if (this.multiples * 10 <= 2.1) {
        this.multiples = 0.2
        return
      }
      this.multiples -= 0.2
    },
    scaleUp () {
      this.multiples += 0.2
    },
    fullScreen () {
      this.multiples = 1
      setTimeout(() => {
        this.isFull = !this.isFull
      })
    },
    rotateLt () {
      this.deg -= 90
    },
    rotateRt () {
      this.deg += 90
    },
    prev () {
      this.multiples = 1
      if (this.currentSrcNum <= 0) {
        this.currentSrcNum = this.previewSrcList.length - 1
        return
      }
      this.currentSrcNum -= 1
    },
    next () {
      this.multiples = 1
      if (this.currentSrcNum >= this.previewSrcList.length - 1) {
        this.currentSrcNum = 0
        return
      }
      this.currentSrcNum += 1
    },
    imgClick () {
    }
  }
}
</script>
